import React from 'react';
import { observer } from 'mobx-react';
import { WeaTab, WeaLocaleProvider } from 'ecCom';
import { Button, Pagination } from 'antd';
import SearchInput from './search-input';
import ReplyItem from './reply-item';
import { ReplyAddDialog, ReplyAddPopup } from './reply-add';
import ReplyStore from '../../stores/reply';
const getLabel = WeaLocaleProvider.getLabel;

export interface ContentProps {
    reply: ReplyStore;
    isSingleReply?:any;
}

@observer
export default class Content extends React.Component<ContentProps, any> {
    pageSizeOptions=['5', '10', '20', '50', '100']
    constructor(props){
        super(props);
    }
    render() {
        const { reply,isSingleReply } = this.props;
        const length = reply.replyList.slice().length;
        let list= reply.replyList;
        if(isSingleReply&&isSingleReply==1){
            if(reply.showReply){//开启了回复评论
                if(reply.replyposition&&reply.replyposition==2){
                    list = list.reverse();
                }
            }
        }
        return (
            <div className="cube-reply-content" id="cube-reply-content" style={{ minHeight: 450 }}>
                <div className="cube-reply-list-wrap">
                    <WeaTab
                        selectedKey={reply.selectedKey}
                        datas={reply.tabDatas}
                        keyParam='key'
                        onChange={reply.changeTab}
                        buttons={this.getTabButtons()}
                    />
                    {
                        list.slice().map((item, index) => (
                            <ReplyItem
                                item={item}
                                edit={reply.edit}
                                delete={reply.delete}
                                like={reply.like}
                                unlike={reply.unlike}
                                reference={reply.reference}
                                about={reply.about}
                                isLast={length == index}
                            />
                        ))
                    }
                    {length == 0 ?
                        <div className="cube-reply-list-placeholder">{getLabel(83553,'暂无数据')}</div>
                        : <Pagination
                            current={reply.current}
                            pageSize={reply.pagesize}
                            total={reply.total}
                            defaultPageSize={reply.pagesize}
                            showSizeChanger={true}
                            showQuickJumper={true}
                            showTotal={this.getTotal}
                            onChange={reply.onPageChange}
                            pageSizeOptions={this.pageSizeOptions}
                            onShowSizeChange={reply.onPageChange}
                        />
                    }
                    <ReplyAddDialog replyAdd={reply.replyAdd} params={reply.params} editorId="cubeReplyAdd" iconInfo={reply.iconInfo}/>
                    <ReplyAddPopup replyAdd={reply.replyAdd} params={reply.params} editorId="cubeReplypPop" iconInfo={reply.iconInfo}/>
                </div>
            </div>
        )
    }

    getTotal = total => ` ${getLabel(18609,"共")+total+' '+getLabel(18256,"条")} `
    getSearchs = () => {

    }
    getTabButtons = () => {
        const { reply } = this.props;
        return [(<SearchInput reply={reply} />), <Button type="primary" icon="plus" onClick={reply.add}>{getLabel(82, "新建")}</Button>]
    }
}
